<template>
	<navBar title="律师详情" color="#fff" bgColor="transparent" :Bot="false"></navBar>
	<view class="Head">
		<image :src="staticImg('bg@2x.png')" mode="widthFix" class="rows"></image>
		<view class="Info">
			<view class="InfoBox">
				<image :src="imgUrls(pageData.avatar)" mode="aspectFill" class="userImg"></image>
				<text class="name">{{ pageData.realName }}</text>
			</view>
			<view class="goodBox">
				<text class="color-333 size26 m-top18">擅长领域：</text>
				<view class="Bos">
					<view
						class="lis"
						v-for="(item, index) in pageData.professionFields"
						:key="index"
						>{{ item.value }}</view
					>
				</view>
			</view>
			<view class="practice">
				<image :src="staticImg('编组@2x.png')" mode="aspectFill" class="praImg"></image>
				<text class="praTxt">执业{{ pageData.year }}年</text>
			</view>
		</view>
	</view>

	<view class="Wrapper">
		<view class="Box">
			<view class="Tilte">律师简介</view>
			<view class="lists" v-if="pageData.credentialNo">
				<text class="color-999">执业证号：</text>
				<text class="color-333">{{ pageData.credentialNo }}</text>
			</view>
			<view class="lists">
				<text class="color-999">工作语言：</text>
				<text class="color-333">中文</text>
			</view>
			<view class="lists">
				<text class="color-999">执业地区：</text>
				<text class="color-333">{{ pageData.address }}</text>
			</view>
			<view class="lists">
				<text class="color-999">执业单位：</text>
				<text class="color-333">{{ pageData.company }}</text>
			</view>
			<view class="lists">
				<text class="color-999">联系方式：</text>
				<text class="color-333">{{ pageData.phone }}</text>
			</view>
			<view class="color-333 size28 m-top20">
				<mpHtml :content="pageData.lawyerDesc" :markdown="true"></mpHtml>
			</view>
		</view>

		<!-- <view class="Box">
			<view class="Tilte">部分成功案例</view>
			<view class="color-333 size28 m-top20"
				>上海拓延机械制造有限公司诉重庆市嘉卡变速器有限公司买卖合同纠纷案；美籍华人SongYuan
				Ghen诉李娅合作办学纠纷案；四川美术学院与重庆住宅建设有限公司建设工程施工合同案。</view
			>
		</view> -->
	</view>
</template>

<script setup>
	import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html';
	import {
		toUrl,
		toLogin,
		Toast,
		formatter,
		tampToDate,
		staticImg,
		imgUrls,
		showLoading,
		hideLoading,
		toRect,
	} from '@/utils/utils.js';

	import { ref, computed, watch } from 'vue';
	import Http from '@/utils/request.js';
	import { onLoad, onShow, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
	import { useMainStore } from '@/stores/index';

	const mainStore = useMainStore();
	const id = ref('');
	const pageData = ref('');
	onLoad((opt) => {
		if (opt.id) id.value = opt.id;
		getLawyerDetail();
	});

	const getLawyerDetail = () => {
		Http.get({
			url: '/hr/getLawyerDetail',
			data: {
				id: id.value,
			},
		}).then((res) => {
			if (res.code != 0) return Toast(res.msg);
			const result = res.data || '';
			result.professionFields = JSON.parse(result.professionFields);
			pageData.value = result;
			console.log(pageData.value);
		});
	};
</script>

<style lang="scss">
	// page {
	// 	background-color: $page;
	// }
</style>
<style lang="scss" scoped>
	.Head {
		width: 100%;
		background-color: $page;
		padding-bottom: 80rpx;
		.Info {
			width: 686rpx;
			background-color: #fff;
			box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(232, 232, 232, 0.3);
			border-radius: 10rpx;
			margin: -200rpx auto 0;
			position: relative;
			z-index: 10;
			padding: 20rpx;
			.InfoBox {
				display: flex;
				align-items: center;
				.userImg {
					width: 144rpx;
					height: 144rpx;
					border-radius: 10rpx;
					margin-right: 32rpx;
				}
				.name {
					color: #333;
					font-size: 32rpx;
					font-weight: 600;
				}
			}
			.goodBox {
				width: 100%;
				display: flex;
				margin-top: 14rpx;
				.Bos {
					flex: 1;
					.lis {
						padding: 6rpx 20rpx;
						background-color: #fcf6ec;
						color: #ff7a30;
						font-size: 24rpx;
						border-radius: 20rpx;
						display: inline-block;
						margin-right: 16rpx;
						margin-top: 16rpx;
					}
					.lis:last-child {
						margin-right: 0;
					}
				}
			}
			.practice {
				display: flex;
				height: 60rpx;
				padding: 0 30rpx;
				border-radius: 200rpx 0rpx 0rpx 200rpx;
				align-items: center;
				background-color: #fcf6ec;
				position: absolute;
				right: 0;
				top: 40rpx;
				.praImg {
					width: 36rpx;
					height: 36rpx;
					margin-right: 8rpx;
				}
				.praTxt {
					color: #ffa50b;
					font-size: 24rpx;
					font-weight: 600;
				}
			}
		}
	}

	.Wrapper {
		width: 100%;
		background-color: #fff;
		padding: 30rpx;
		border-radius: 30rpx 30rpx 0 0;
		margin-top: -50rpx;
		.Box {
			width: 100%;
			padding-bottom: 40rpx;
			margin-bottom: 32rpx;
			border-bottom: 1px solid #e5e5e5;
			.Tilte {
				width: 100%;
				padding-left: 26rpx;
				position: relative;
				font-size: 30rpx;
				font-weight: 600;
				color: #333;
				margin-bottom: 10rpx;
			}
			.Tilte:before {
				content: '';
				width: 8rpx;
				height: 32rpx;
				background-color: v-bind('mainStore.color');
				position: absolute;
				left: 0;
				top: 50%;
				z-index: 2;
				transform: translateY(-50%);
			}
			.lists {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				line-height: 58rpx;
			}
		}
		.Box:last-child {
			border-bottom: none;
		}
	}
</style>
